<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<ol>
		<li><a href="filename=bootstrap3-code.html">Bootstrap
				允许您以两种方式显示代码： 第一种是 code 标签。如果您想要内联显示代码，那么您应该使用 code 标签。 第二种是 pre
				标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用 pre 标签。 请确保当您使用 pre 和 code
				标签时，开始和结束标签使用了 unicode 变体： lt; 和 gt; </a></li>
		<h1>表格</h1>
		<li><a href="bootstrap3-table-basic.html">如果您想要一个只带有内边距（padding）和水平分割的基本表，请添加
				class .table，如下面实例所示：</a></li>
		<li><a href="bootstrap3-table-striped.html">可选的表格类 除了基本的表格标记和
				.table class，还有一些可以用来为标记定义样式的类。下面将向您介绍这些类。 条纹表格 通过添加 .table-striped
				class，您将在 tbody内的行上看到条纹，如下面的实例所示： </a></li>
		<li><a href="bootstrap3-table-bodered.html">通过添加
				.table-bordered class，您将看到每个元素周围都有边框，且占整个表格是圆角的，如下面的实例所示：</a></li>
		<li><a href="bootstrap3-table-hover.html">通过添加 .table-hover
				class，当指针悬停在行上时会出现浅灰色背景，如下面的实例所示：</a></li>
		<li><a href="bootstrap3-table-condensed.html">通过添加
				.table-condensed
				class，行内边距（padding）被切为两半，以便让表看起来更紧凑，如下面的实例所示。这在想让信息看起来更紧凑时非常有用。</a></li>
		<li><a href="bootstrap3-table-contextual.html">下表中所列出的上下文类允许您改变表格行或单个单元格的背景颜色。.active
				对某一特定的行或单元格应用悬停颜色 .success 表示一个成功的或积极的动作 .warning 表示一个需要注意的警告
				.danger 表示一个危险的或潜在的负面动作 这些类可被应用到 tr 、 td或 th。 </a></li>
		<li><a href="bootstrap3-table-responsive.html">通过把任意的 .table
				包在 .table-responsive class 内，您可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px
				宽的大型设备上查看时，您将看不到任何的差别。</a></li>
		<h1>表单</h1>
		<li><a href="bootstrap3-form-basic.html">基本的表单结构是 Bootstrap
				自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤： 向父 form 元素添加 role="form"。
				把标签和控件放在一个带有 class .form-group 的 div 中。这是获取最佳间距所必需的。 向所有的文本元素 input、
				textarea 和 select 添加 class .form-control。 </a></li>
		<li><a href="bootstrap3-form-inline.html">内联表单
				如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向
				<form>标签添加 class .form-inline。
		</a></li>
		<li><a href="bootstrap3-form-horizontal.html">水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行：
				向父 form 元素添加 class .form-horizontal。 把标签和控件放在一个带有 class .form-group
				的 div中。 向标签添加 class .control-label。 </a></li>
		<li><a href="bootstrap3-form-inputs.html">输入框（Input）
				最常见的表单文本字段是输入框 input。用户可以在其中输入大多数必要的表单数据。Bootstrap 提供了对所有原生的 HTML5 的
				input
				类型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel
				和 color。适当的 type 声明是必需的，这样才能让 input 获得完整的样式。</a></li>
		<li><a href="bootstrap3-form-textarea.html">文本框（Textarea）
				当您需要进行多行输入的时，则可以使用文本框 textarea。必要时可以改变 rows 属性（较少的行 = 较小的盒子，较多的行 =
				较大的盒子）。</a></li>
		<li><a href="bootstrap3-form-checkboxradio.html">复选框（Checkbox）和单选框（Radio）
				复选框和单选按钮用于让用户从一系列预设置的选项中进行选择。 当创建表单时，如果您想让用户从列表中选择若干个选项时，请使用
				checkbox。如果您限制用户只能选择一个选项，请使用 radio。 对一系列复选框和单选框使用 .checkbox-inline 或
				.radio-inline class，控制它们显示在同一行上。 下面的实例演示了这两种类型（默认和内联）：</a></li>
		<li><a href="bootstrap3-form-select.html">当您想让用户从多个选项中进行选择，但是默认情况下只能选择一个选项时，则使用选择框。
				使用 select展示列表选项，通常是那些用户很熟悉的选择列表，比如州或者数字。 使用 multiple="multiple"
				允许用户选择多个选项。 下面的实例演示了这两种类型（select 和 multiple）： </a></li>
		<li><a href="bootstrap3-form-staticcontrol.html">静态控件
				当您需要在一个水平表单内的表单标签后放置纯文本时，请在 p上使用 class .form-control-static。 </a></li>
		<li><a href="bootstrap3-form-controlstate.html">表单控件状态 除了
				:focus 状态（即，用户点击 input 或使用 tab 键聚焦到 input 上），Bootstrap
				还为禁用的输入框定义了样式，并提供了表单验证的 class。 输入框焦点 当输入框 input 接收到 :focus
				时，输入框的轮廓会被移除，同时应用 box-shadow。 禁用的输入框 input 如果您想要禁用一个输入框
				input，只需要简单地添加 disabled
				属性，这不仅会禁用输入框，还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。 禁用的字段集 fieldset 对
				fieldset 添加 disabled 属性来禁用 fieldset内的所有控件。 验证状态 Bootstrap
				包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或
				.has-success）即可使用验证状态。 </a></li>
		<li><a href="bootstrap3-form-controlsize.html">您可以分别使用 class
				.input-lg 和 .col-lg-* 来设置表单的高度和宽度。下面的实例演示了这点：</a></li>
		<li><a href="bootstrap3-form-controlstate.html">Bootstrap
				表单控件可以在输入框 input 上有一个块级帮助文本。为了添加一个占用整个宽度的内容块，请在 input 后使用
				.help-block。下面的实例演示了这点： </a></li>
		<li><a href="bootstrap3-button-options.html">.btn 为按钮添加基本样式
				尝试一下 .btn-default 默认/标准按钮 尝试一下 .btn-primary 原始按钮样式（未被操作） 尝试一下
				.btn-success 表示成功的动作 尝试一下 .btn-info 该样式可用于要弹出信息的按钮 尝试一下 .btn-warning
				表示需要谨慎操作的按钮 尝试一下 .btn-danger 表示一个危险动作的按钮操作 尝试一下 .btn-link 让按钮看起来像个链接
				(仍然保留按钮行为) 尝试一下 .btn-lg 制作一个大按钮 尝试一下 .btn-sm 制作一个小按钮 尝试一下 .btn-xs
				制作一个超小按钮 尝试一下 .btn-block 块级按钮(拉伸至父元素100%的宽度) 尝试一下 .active 按钮被点击 尝试一下
				.disabled 禁用按钮</a></li>
		<li><a href="bootstrap3-button-size.html">按钮大小 下表列出了获得各种大小按钮的
				class： Class 描述 .btn-lg 这会让按钮看起来比较大。 .btn-sm 这会让按钮看起来比较小。 .btn-xs
				这会让按钮看起来特别小。 .btn-block 这会创建块级的按钮，会横跨父元素的全部宽度。</a></li>
		<li><a href="bootstrap3-button-activestate.html"> 元素 Class
				按钮元素 添加 .active class 来显示它是激活的。 锚元素 添加 .active class 到 <a>
					按钮来显示它是激活的。</a></li>
		<li><a href="bootstrap3-button-tags.html">按钮标签 您可以在 <a>、
					button 或 input 元素上使用按钮 class。但是建议您在 button元素上使用按钮
					class，避免跨浏览器的不一致性问题。 </a></li>
		<li><a href="bootstrap3-image.html">在本章中，我们将学习 Bootstrap
				对图片的支持。Bootstrap 提供了三个可对图片应用简单样式的 class： .img-rounded：添加
				border-radius:6px 来获得图片圆角。 .img-circle：添加 border-radius:50%
				来让整个图片变成圆形。 .img-thumbnail：添加一些内边距（padding）和一个灰色的边框。</a></li>
		<li><a href="trybs_ref_img-responsive.html">响应式图片 通过在 <img>
				标签添加 .img-responsive 类来让图片支持响应式设计。 图片将很好地扩展到父元素。 .img-responsive 类将
				max-width: 100%; 和 height: auto; 样式应用在图片上：
		</a></li>
		<li><a href="bootstrap3-helper-closeicon.html">使用通用的关闭图标来关闭模态框和警告框。使用
				class close 得到关闭图标。</a></li>
		<li><a href="bootstrap3-helper-caret.html">使用插入符表示下拉功能和方向。使用带有
				class caret 的 span 元素得到该功能。 </a></li>
		<li><a href="bootstrap3-helper-quickfloat.html">您可以分别使用 class
				pull-left 或 pull-right 来把元素向左或向右浮动。下面的实例演示了这点。</a></li>
		<li><a href="bootstrap3-helper-centercontentblock.html">使用
				class center-block 来居中元素。</a></li>
		<li><a href="bootstrap3-helper-clearfix.html">如需清除元素的浮动，请使用
				.clearfix class。</a></li>
		<li><a href="bootstrap3-helper-showhide.html">您可以通过使用 class
				.show 和 .hidden 来强行设置元素显示或隐藏（包括屏幕阅读器）。</a></li>
		<li><a href="bootstrap3-helper-screenreader.html">您可以通过使用
				class .sr-only 来把元素对所有设备隐藏，除了屏幕阅读器。</a></li>
		<li><a href="bootstrap3-resonsive-utilies.html">下面的实例演示了上面所列举的帮助器类的用法。调整浏览器的窗口大小，或者在不同的设备上加载实例，测试响应式实用工具类。
		</a></li>
		<h1>Bootstrap布局组件</h1>
		<li><a href="bootstrap3-glyph-icons.html">点击这里，查看可用的字体图标列表。</a></li>
		<li><a href="bootstrap3-glyphicons.html">如需使用图标，只需要简单地使用下面的代码即可。请在图标和文本之间保留适当的空间。下面的实例演示了如何使用字体图标：</a></li>
		<li><a href="bootstrap-using-glyphicons-navbar.html">带有导航栏的字体图标</a></li>
		<li><a href="bootstrap3-dropdown-basic&basepath=0.html">如需使用下列菜单，只需要在
				class .dropdown 内加上下拉菜单即可。下面的实例演示了基本的下拉菜单：</a></li>
		<li><a href="bootstrap3-dropdown-alignright.html">通过向
				.dropdown-menu 添加 class .pull-right 来向右对齐下拉菜单。下面的实例演示了这点：</a></li>
		<li><a href="bootstrap3-buttongroup-basic.html">下面的实例演示了上面表格中讨论到的
				class .btn-group 的使用：</a></li>

		<li><a href="bootstrap3-buttongroup-buttontoolbar.html">下面的实例演示了上面表格中讨论到的
				class .btn-toolbar 的使用：</a></li>
		<li><a href="bootstrap3-buttongroup-size.html">下面的实例演示了上面表格中讨论到的
				class .btn-group-* 的使用：</a></li>
		<li><a href="bootstrap3-buttongroup-nested.html">您可以在一个按钮组内嵌套另一个按钮组，即，在一个
				.btn-group 内嵌套另一个 .btn-group 。当您向让下拉菜单与一系列按钮组合使用时，就会用到这个。</a></li>
		<li><a href="bootstrap3-buttongroup-vertical.html">下面的实例演示了上面表格中讨论到的
				class .btn-group-vertical 的使用：</a></li>
		<li><a href="bootstrap3-buttondropdown-basic&basepath=0.html">本章将讲解如何使用
				Bootstrap class 向按钮添加下拉菜单。如需向按钮添加下拉菜单，只需要简单地在在一个 .btn-group
				中放置按钮和下拉菜单即可。您也可以使用 span class="caret"/span 来指示按钮作为下拉菜单。
				下面的实例演示了一个基本的简单的按钮下拉菜单： </a></li>
		<li><a href="bootstrap3-buttondropdown-split&basepath=0.html">分割的按钮下拉菜单
				分割的按钮下拉菜单使用与下拉菜单按钮大致相同的样式，但是对下拉菜单添加了原始的功能。分割按钮的左边是原始的功能，右边是显示下拉菜单的切换。</a></li>
		<li><a href="bootstrap3-buttondropdown-size&basepath=0.html">按钮下拉菜单的大小
				您可以使用带有各种大小按钮的下拉菜单：.btn-large、.btn-sm 或 .btn-xs。</a></li>
		<li><a
			href="bootstrap3-buttondropdown-dropupvariation&basepath=0.html">按钮上拉菜单
				菜单也可以往上拉伸的，只需要简单地向父 .btn-group 容器添加 .dropup 即可。</a></li>
		<li><a href="bootstrap3-inputgroup.html">基本的输入框组
				下面的实例演示了基本的输入框组：</a></li>
		<li><a href="bootstrap3-inputgroup-size.html">输入框组的大小 您可以通过向
				.input-group 添加相对表单大小的 class（比如
				.input-group-lg、input-group-sm）来改变输入框组的大小。输入框中的内容会自动调整大小。
				下面的实例演示了这点：</a></li>
		<li><a href="bootstrap3-inputgroup-radiocheckbox.html">复选框和单选插件
				您可以把复选框和单选插件作为输入框组的前缀或者后缀元素，如下面的实例所示：</a></li>
		<li><a href="bootstrap3-inputgroup-buttonaddons.html">按钮插件
				您也可以把按钮作为输入框组的前缀或者后缀元素，这个时候您就不是添加 .input-group-addon class，您需要使用
				class .input-group-btn 来包裹按钮。这是必需的，因为默认的浏览器样式不会被重写。下面的实例演示了这点：</a></li>
		<li><a href="bootstrap3-inputgroup-segmenteddrpdown.html">分割的下拉菜单按钮
				在输入框组中添加带有下拉菜单的分割按钮，使用与下拉菜单按钮大致相同的样式，但是对下拉菜单添加了主要的功能，如下面的实例所示：</a></li>
		<li><a href="bootstrap3-navigation-tabs&basepath=0.html">表格导航或标签
				创建一个标签式的导航菜单： 以一个带有 class .nav 的无序列表开始。 添加 class .nav-tabs。
				下面的实例演示了这点：</a></li>
		<li><a href="bootstrap3-navigation-basicpills&basepath=0.html">胶囊式的导航菜单
				基本的胶囊式导航菜单 如果需要把标签改成胶囊的样式，只需要使用 class .nav-pills 代替 .nav-tabs
				即可，其他的步骤与上面相同。 下面的实例演示了这点：</a></li>
		<li><a href="bootstrap3-navigation-verticalpills&basepath=0.html">--------------------</a></li>
		<li><a href="bootstrap3-navigation-justifiednav&basepath=0.html">您可以在屏幕宽度大于
				768px 时，通过在分别使用 .nav、.nav-tabs 或 .nav、.nav-pills 的同时使用 class
				.nav-justified，让标签式或胶囊式导航菜单与父元素等宽。在更小的屏幕上，导航链接会堆叠。</a></li>
		<li><a
			href="bootstrap3-navigation-disabledlinksnav&basepath=0.html">禁用链接
				对每个 .nav class，如果添加了 .disabled class，则会创建一个灰色的链接，同时禁用了该链接的 :hover
				状态，如下面的实例所示：</a></li>
		<li><a href="bootstrap3-navigation-tabsdropdown&basepath=0.html">下拉菜单
				导航菜单与下拉菜单使用相似的语法。默认情况下，列表项的锚与一些数据属性协同合作来触发带有 .dropdown-menu class
				的无序列表。 带有下拉菜单的标签 向标签添加下拉菜单的步骤如下： 以一个带有 class .nav 的无序列表开始。 添加 class
				.nav-tabs。 添加带有 .dropdown-menu class 的无序列表。</a></li>
		<li><a href="bootstrap3-navigation-pillsdropdown&basepath=0.html">带有下拉菜单的胶囊
				步骤与创建带有下拉菜单的标签相同，只是需要把 .nav-tabs class 改为 .nav-pills，如下面的实例所示：</a></li>
		<h1>导航栏</h1>
		<li><a href="filename=bootstrap3-navbar-default.html">默认的导航栏
				创建一个默认的导航栏的步骤如下： 向 nav 标签添加 class .navbar、.navbar-default。 向上面的元素添加
				role="navigation"，有助于增加可访问性。 向 div 元素添加一个标题 class
				.navbar-header，内部包含了带有 class navbar-brand 的 a 元素。这会让文本看起来更大一号。
				为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。</a></li>
		<li><a href="bootstrap3-navbar-responsive.html">响应式的导航栏
				为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 class .collapse、.navbar-collapse 的 div
				中。折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。第一个是
				data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是
				data-target，指示要切换到哪一个元素。三个带有 class .icon-bar 的 span 创建所谓的汉堡按钮。这些会切换为
				.nav-collapse div中的元素。为了实现以上这些功能，您必须包含 Bootstrap 折叠（Collapse）插件。
				下面的实例演示了这点： </a></li>
		<li><a href="bootstrap3-navbar-forms.html">导航栏中的表单
				导航栏中的表单不是使用 Bootstrap 表单 章节中所讲到的默认的 class，它是使用 .navbar-form
				class。这确保了表单适当的垂直对齐和在较窄的视口中折叠的行为。使用对齐方式选项（这将在组件对齐方式部分进行详细讲解）来决定导航栏中的内容放置在哪里。
				下面的实例演示了这点：</a></li>
		<li><a href="bootstrap3-navbar-buttons.html">导航栏中的按钮 您可以使用
				class .navbar-btn 向不在 form 中的 button 元素添加按钮，按钮在导航栏上垂直居中。.navbar-btn
				可被使用在 a 和 input 元素上。 不要在 .navbar-nav 内的 a 元素上使用 .navbar-btn，因为它不是标准的
				button class。 下面的实例演示了这点：</a></li>
		<li><a href="filename=bootstrap3-navbar-text.html">导航栏中的文本
				如果需要在导航中包含文本字符串，请使用 class .navbar-text。这通常与
				p标签一起使用，确保适当的前导和颜色。下面的实例演示了这点： </a></li>
		<li><a href="bootstrap3-navbar-nonnavlinks.html">结合图标的导航链接
				如果您想在常规的导航栏导航组件内使用图标，那么请使用 class glyphicon glyphicon-* 来设置图标，更多请查看
				Bootstrap 图标 ，如下面的实例所示：</a></li>
		<li><a href="bootstrap3-navbar-compalignment.html">组件对齐方式
				您可以使用实用工具 class .navbar-left 或 .navbar-right 向左或向右对齐导航栏中的
				导航链接、表单、按钮或文本 这些组件。这两个 class 都会在指定的方向上添加 CSS 浮动。下面的实例演示了这点：</a></li>
		<li><a href="bootstrap3-navbar-fixedtotop.html">Bootstrap
				导航栏可以动态定位。默认情况下，它是块级元素，它是基于在 HTML
				中放置的位置定位的。通过一些帮助器类，您可以把它放置在页面的顶部或者底部，或者您可以让它成为随着页面一起滚动的静态导航栏。
				如果您想要让导航栏固定在页面的顶部，请向 .navbar class 添加 class
				.navbar-fixed-top。下面的实例演示了这点： 为了防止导航栏与页面主体中的其他内容的顶部相交错，请向 body标签添加至少
				50 像素的内边距（padding），内边距的值可以根据您的需要进行设置。 </a></li>
		<li><a href="bootstrap3-navbar-fixedtobottom.html">固定到底部
				如果您想要让导航栏固定在页面的底部，请向 .navbar class 添加 class
				.navbar-fixed-bottom。下面的实例演示了这点：</a></li>
		<li><a href="bootstrap3-navbar-statictop.html">静态的顶部
				如需创建能随着页面一起滚动的导航栏，请添加 .navbar-static-top class。该 class 不要求向
				body添加内边距（padding）。 </a></li>
		<li><a href="bootstrap3-navbar-inverted.html">倒置的导航栏
				为了创建一个带有黑色背景白色文本的倒置的导航栏，只需要简单地向 .navbar class 添加 .navbar-inverse
				class 即可，如下面的实例所示： 为了防止导航栏与页面主体中的其他内容的顶部相交错，请向 body标签添加至少 50
				像素的内边距（padding），内边距的值可以根据您的需要进行设置。 </a></li>
		<h1>面包屑导航</h1>
		<li><a href="bootstrap3-breadcrumb.html">面包屑导航（Breadcrumbs）是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置。
				Bootstrap 中的面包屑导航（Breadcrumbs）是一个简单的带有 .breadcrumb class
				的无序列表。分隔符会通过 CSS（bootstrap.min.css）中下面所示的 class 自动被添加：</a></li>
		<h1>分页</h1>

		<li><a href="bootstrap3-pagination.html">下面的实例演示了上表中所讨论的
				class .pagination 的用法：</a></li>
		<li><a href="bootstrap3-pagination-state.html">下面的实例演示了上表中所讨论的
				class .disabled、.active 的用法：</a></li>
		<li><a href="bootstrap3-pagination-size.html">分页的大小
				下面的实例演示了上表中所讨论的 class .pagination-* 的用法：</a></li>
		<li><a href="bootstrap3-pager.html">下面的实例演示了上表中所讨论的 class
				.pager 的用法</a></li>
		<li><a href="bootstrap3-pager-align.html">对齐的链接
				下面的实例演示了上表中所讨论的 class .previous、.next 的用法：</a></li>
		<li><a href="bootstrap3-pager-state.html">翻页的状态
				下面的实例演示了上表中所讨论的 class .disabled 的用法</a></li>
		<h1>标签</h1>
		<li><a href="bootstrap3-labels">本章将讲解 Bootstrap
				标签。标签可用于计数、提示或页面上其他的标记显示。使用 class .label 来显示标签，如下面的实例所示：</a></li>
		<li><a href="bootstrap3-labels-variation.html">您可以使用修饰的 class
				label-default、label-primary、label-success、label-info、label-warning、label-danger
				来改变标签的外观，如下面的实例所示</a></li>
		<h1>徽章（Badges）</h1>
		<li><a href="bootstrap3-badges.html">Bootstrap 徽章（Badges）
				本章将讲解 Bootstrap 徽章（Badges）。徽章与标签相似，主要的区别在于徽章的边角更加圆滑。
				徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要把 span class="badge"
				添加到链接、Bootstrap 导航等这些元素上即可。 </a></li>
		<li><a href="trybs_ref_comp_badge&basepath=0.html">当没有新的或未读的项时，通过
				CSS 的 :empty 选择器，徽章会折叠起来，表示里边没有内容。 实例 展示未读消失：</a></li>
		<li><a href="bootstrap3-badges-activestate.html">激活导航状态
				您可以在激活状态的胶囊式导航和列表导航中放置徽章。通过使用 span class="badge" 来激活链接，如下面的实例所示 </a></li>
		<h1>Bootstrap 超大屏幕（Jumbotron）</h1>
		<li><a href="bootstrap3-jumbotron.html">本章将讲解 Bootstrap
				支持的另一个特性，超大屏幕（Jumbotron）。顾名思义该组件可以增加标题的大小，并为登陆页面内容添加更多的外边距（margin）。使用超大屏幕（Jumbotron）的步骤如下：
				创建一个带有 class .jumbotron. 的容器 div 。 除了更大的 h1，字体粗细 font-weight 被减为
				200。 </a></li>
		<li><a href="bootstrap3-jumbotron-fullwidth.html">为了获得占用全部宽度且不带圆角的超大屏幕，请在所有的
				.container class 外使用 .jumbotron class，如下面的实例所示</a></li>
		<h1>Bootstrap 页面标题（Page Header）</h1>
		<li><a href="bootstrap3-pageheader.html">页面标题（Page
				Header）是个不错的功能，它会在网页标题四周添加适当的间距。当一个网页中有多个标题且每个标题之间需要添加一定的间距时，页面标题这个功能就显得特别有用。如需使用页面标题（Page
				Header），请把您的标题放置在带有 class .page-header 的 div中： </a></li>
		<h1>Bootstrap 缩略图</h1>
		<li><a href="bootstrap3-thumbnail.html"></a>本章将讲解 Bootstrap
			缩略图。大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap 通过缩略图为此提供了一种简便的方式。使用 Bootstrap
			创建缩略图的步骤如下： 在图像周围添加带有 class .thumbnail 的 a 标签。
			这会添加四个像素的内边距（padding）和一个灰色的边框。 当鼠标悬停在图像上时，会动画显示出图像的轮廓。</li>
		<li><a href="bootstrap3-thumbnail-custom.html">添加自定义的内容
				现在我们有了一个基本的缩略图，我们可以向缩略图添加各种 HTML 内容，比如标题、段落或按钮。具体步骤如下： 把带有 class
				.thumbnail 的 a 标签改为 div 。 在该 div 内，您可以添加任何您想要添加的东西。由于这是一个
				div，我们可以使用默认的基于 span 的命名规则来调整大小。
				如果您想要给多个图像进行分组，请把它们放置在一个无序列表中，且每个列表项向左浮动。 </a></li>
		<h1>Bootstrap 警告（Alerts）</h1>
		<li><a href="bootstrap3-alert.html">本章将讲解警告（Alerts）以及
				Bootstrap 所提供的用于警告的
				class。警告（Alerts）向用户提供了一种定义消息样式的方式。它们为典型的用户操作提供了上下文信息反馈。
				您可以为警告框添加一个可选的关闭按钮。为了创建一个内联的可取消的警告框，请使用 警告（Alerts） jQuery 插件。
				您可以通过创建一个 div，并向其添加一个 .alert class 和四个上下文 class（即
				.alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。下面的实例演示了这点：
		</a></li>
		<li><a href="bootstrap3-alert-dismissal.html">可取消的警告（Dismissal
				Alerts） 创建一个可取消的警告（Dismissal Alert）步骤如下： 通过创建一个 div ，并向其添加一个 .alert
				class 和四个上下文 class（即
				.alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。
				同时向上面的 div class 添加可选的s .alert-dismissable。 添加一个关闭按钮。 </a></li>
		<li><a href="bootstrap3-alert-links.html">警告（Alerts）中的链接
				在警告（Alerts）中创建链接的步骤如下： 通过创建一个 div，并向其添加一个 .alert class 和四个上下文
				class（即
				.alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。
				使用 .alert-link 实体类来快速提供带有匹配颜色的链接。 </a></li>
		<h1>Bootstrap 进度条</h1>
		<li><a href="bootstrap3-progressbar.html">默认的进度条
				创建一个基本的进度条的步骤如下： 添加一个带有 class .progress 的 div 。 接着，在上面的 div 内，添加一个带有
				class .progress-bar 的空的 div。 添加一个带有百分比表示的宽度的 style 属性，例如
				style="60%"; 表示进度条在 60% 的位置。 </a></li>
		<li><a href="bootstrap3-progressbar-alternate.html">交替的进度条
				创建不同样式的进度条的步骤如下： 添加一个带有 class .progress 的 div 。 接着，在上面的 div 内，添加一个带有
				class .progress-bar 和 class progress-bar-* 的空的 div。其中，* 可以是
				success、info、warning、danger。 添加一个带有百分比表示的宽度的 style 属性，例如
				style="60%"; 表示进度条在 60% 的位置。 </a></li>
		<li><a href="bootstrap3-progressbar-striped.html">条纹的进度条
				创建一个条纹的进度条的步骤如下： 添加一个带有 class .progress 和 .progress-striped 的 div 。
				接着，在上面的 div 内，添加一个带有 class .progress-bar 和 class progress-bar-* 的空的
				div。其中，* 可以是 success、info、warning、danger。 添加一个带有百分比表示的宽度的 style
				属性，例如 style="60%"; 表示进度条在 60% 的位置。 </a></li>
		<li><a href="bootstrap3-progressbar-animated.html">动画的进度条
				创建一个动画的进度条的步骤如下： 添加一个带有 class .progress 和 .progress-striped 的 div
				。同时添加 class .active。 接着，在上面的 div 内，添加一个带有 class .progress-bar 的空的
				div。 添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置。 </a></li>
		<li><a href="bootstrap3-progressbar-stacked.html">堆叠的进度条
				您甚至可以堆叠多个进度条。把多个进度条放在相同的 .progress 中即可实现堆叠，如下面的实例所示：</a></li>
		<h1>Bootstrap 多媒体对象（Media Object）</h1>
		<li><a href="bootstrap3-mediaobject.html">本章我们将讲解 Bootstrap
				中的多媒体对象（Media
				Object）。这些抽象的对象样式用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。
				媒体对象轻量标记、易于扩展的特性是通过向简单的标记应用 class 来实现的。你可以在 HTML 标签中添加以下两种形式来设置媒体对象：
				.media：该 class 允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边。
				.media-list：如果你需要一个列表，各项内容是无序列表的一部分，可以使用该 class。可用于评论列表与文章列表。</a></li>
		<li><a href="bootstrap3-mediaobject-list.html">让我们来看看下面这个有关媒体对象列表
				.media-list 的实例：</a></li>
		<h1>Bootstrap 列表组</h1>
		<li><a href="bootstrap3-listgroup-basic.html">本章我们将讲解列表组。列表组件用于以列表形式呈现复杂的和自定义的内容。创建一个基本的列表组的步骤如下：
				向元素 ul 添加 class .list-group。 向 li添加 class .list-group-item。 </a></li>
		<li><a href="bootstrap3-listgroup-badges.html">向列表组添加徽章
				我们可以向任意的列表项添加徽章组件，它会自动定位到右边。只需要在 li元素中添加 span class="badge"
				即可。下面的实例演示了这点： </a></li>
		<li><a href="bootstrap3-listgroup-links.html">向列表组添加链接
				通过使用锚标签代替列表项，我们可以向列表组添加链接。我们需要使用 div 代替 ul元素。下面的实例演示了这点： </a></li>
		<li><a href="bootstrap3-listgroup-customcontent.html">向列表组添加自定义内容
				我们可以向上面已添加链接的列表组添加任意的 HTML 内容。下面的实例演示了这点：</a></li>
		<h1>Bootstrap 面板（Panels）</h1>
		<li><a href="bootstrap3-panel-deafult.html">本章将讲解 Bootstrap
				面板（Panels）。面板组件用于把 DOM 组件插入到一个盒子中。创建一个基本的面板，只需要向 div元素添加 class
				.panel 和 class .panel-default 即可，如下面的实例所示： </a></li>
		<li><a href="bootstrap3-panel-heading.html">面板标题
				我们可以通过以下两种方式来添加面板标题： 使用 .panel-heading class 可以很简单地向面板添加标题容器。to
				easily add a heading container to your panel. 使用带有 .panel-title
				class 的 h1 - h6来添加预定义样式的标题。 </a></li>
		<li><a href="bootstrap3-panel-footer.html">面板脚注
				我们可以在面板中添加脚注，只需要把按钮或者副文本放在带有 class .panel-footer 的
				div中即可。下面的实例演示了这点： </a></li>
		<li><a href="bootstrap3-panel-styles.html">带语境色彩的面板 使用语境状态类
				panel-primary、panel-success、panel-info、panel-warning、panel-danger，来设置带语境色彩的面板，实例如下：</a></li>
		<li><a href="bootstrap3-panel-table.html">带表格的面板
				为了在面板中创建一个无边框的表格，我们可以在面板中使用 class .table。假设有个 div 包含
				.panel-body，我们可以向表格的顶部添加额外的边框用来分隔。如果没有包含 .panel-body 的
				div，则组件会无中断地从面板头部移动到表格。 下面的实例演示了这点： </a></li>
		<li><a href="bootstrap3-panel-listgroups.html">带列表组的面板
				我们可以在任何面板中包含列表组，通过在 div元素中添加 .panel 和 .panel-default
				类来创建面板，并在面板中添加列表组。您可以从 列表组 一章中学习如何创建列表组。 </a></li>
		<h1>Bootstrap Well</h1>
		<li><a href="bootstrap3-wells.html">Well 是一种会引起内容凹陷显示或插图效果的容器
				div 。为了创建 Well，只需要简单地把内容放在带有 class .well 的 div中即可。下面的实例演示了一个默认的
				Well： </a></li>
		<li><a href="bootstrap3-wells-size.html">尺寸大小 您可以使用可选类
				well-lg 或 well-sm 来改变 Well 的尺寸大小。这两个类是与 .well
				类结合使用的。这两个类会影响内边距（padding），根据使用的类，Well 会显示得更大或者更小。</a></li>
		<h1>Bootstrap 布局组件</h1>
		<li><a href="bootstrap3-plugin-modal.html">用法
				您可以切换模态框（Modal）插件的隐藏内容： 通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性
				data-toggle="modal"，同时设置 data-target="#identifier" 或
				href="#identifier" 来指定要切换的特定的模态框（带有 id="identifier"）。 通过
				JavaScript：使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框：
				$('#identifier').modal(options)</a></li>
		<li><a href="bootstrap3-plugin-modal-method.html">使用模态窗口，您需要有某种触发器。您可以使用按钮或链接。这里我们使用的是按钮。
				如果您仔细查看上面的代码，您会发现在 button 标签中，data-target="#myModal"
				是您想要在页面上加载的模态框的目标。您可以在页面上创建多个模态框，然后为每个模态框创建不同的触发器。现在，很明显，您不能在同一时间加载多个模块，但您可以在页面上创建多个在不同时间进行加载。
				在模态框中需要注意两点： 第一是 .modal，用来把 div 的内容识别为模态框。 第二是 .fade
				class。当模态框被切换时，它会引起内容淡入淡出。
				aria-labelledby="myModalLabel"，该属性引用模态框的标题。 属性 aria-hidden="true"
				用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上）。 div
				class="modal-header">，modal-header 是为模态窗口的头部定义样式的类。
				class="close"，close 是一个 CSS class，用于为模态窗口的关闭按钮设置样式。
				data-dismiss="modal"，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。
				class="modal-body"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的主体设置样式。
				class="modal-footer"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的底部设置样式。
				data-toggle="modal"，HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。 </a></li>
		<li><a href="bootstrap3-plugin-modal-event.html">下表列出了模态框中要用到事件。这些事件可在函数中当钩子使用。</a></li>
		<li><a href="bootstrap3-plugin-scrollspy&basepath=0.html">滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动，基于滚动条的位置向导航栏添加
				.active class。 如果您想要单独引用该插件的功能，那么您需要引用 scrollspy.js。或者，正如 Bootstrap
				插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。 用法
				您可以向顶部导航添加滚动监听行为： 通过 data 属性：向您想要监听的元素（通常是 body）添加
				data-spy="scroll"。然后添加带有 Bootstrap .nav 组件的父元素的 ID 或 class 的属性
				data-target。为了它能正常工作，您必须确保页面主体中有匹配您所要监听链接的 ID 的元素存在。</a></li>
		<li><a href="bootstrap3-plugin-scrollspy-method&basepath=0.html">方法
				.scrollspy('refresh')：当通过 JavaScript 调用 scrollspy 方法时，您需要调用 .refresh
				方法来更新 DOM。这在 DOM 的任意元素发生变更（即，您添加或移除了某些元素）时非常有用。下面是使用该方法的语法。</a></li>
		<li><a href="bootstrap3-plugin-scrollspy-event&basepath=0.html">下表列出了滚动监听中要用到事件。这些事件可在函数中当钩子使用。</a></li>
		<li><a href="trybs_scrollspy&basepath=0.html">创建水平滚动监听
				以下实例演示了如何创建水平滚动监听:</a></li>
		<li><a href="trybs_scrollspy2&basepath=0.html">如何创建垂直滚动监听
				以下实例演示了如何创建垂直滚动监听:</a></li>
		<li><a href="bootstrap3-plugin-tab.html">Bootstrap 标签页（Tab）插件
				标签页（Tab）在 Bootstrap 导航元素 一章中介绍过。通过结合一些 data
				属性，您可以轻松地创建一个标签页界面。通过这个插件您可以把内容放置在标签页或者是胶囊式标签页甚至是下拉菜单标签页中。
				如果您想要单独引用该插件的功能，那么您需要引用 tab.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用
				bootstrap.js 或压缩版的 bootstrap.min.js。 用法 您可以通过以下两种方式启用标签页： 通过 data
				属性：您需要添加 data-toggle="tab" 或 data-toggle="pill" 到锚文本链接中。 添加 nav 和
				nav-tabs 类到 ul 中，将会应用 Bootstrap 标签样式，添加 nav 和 nav-pills 类到 ul 中，将会应用
				Bootstrap 胶囊式样式。</a></li>
		<li><a href="bootstrap3-plugin-tab-method.html">.$().tab：该方法可以激活标签页元素和内容容器。标签页需要用一个
				data-target 或者一个指向 DOM 中容器节点的 href。</a></li>
		<li><a href="bootstrap3-plugin-tab-event.html">事件
				下表列出了标签页（Tab）插件中要用到的事件。这些事件可在函数中当钩子使用。</a></li>
		<li><a href="bootstrap3-plugin-tooltip.html">提示工具（Tooltip）插件根据需求生成内容和标记，默认情况下是把提示工具（tooltip）放在它们的触发元素后面。您可以有以下两种方式添加提示工具（tooltip）：
				通过 data 属性：如需添加一个提示工具（tooltip），只需向一个锚标签添加 data-toggle="tooltip"
				即可。锚的 title 即为提示工具（tooltip）的文本。默认情况下，插件把提示工具（tooltip）设置在顶部。</a></li>
		<li><a href="bootstrap3-plugin-tooltip-method.html">实例
				下面的实例演示了提示工具（Tooltip）插件方法的用法。</a></li>
		<li><a href="bootstrap3-plugin-tooltip-event.html">实例
				下面的实例演示了提示工具（Tooltip）插件事件的用法。</a></li>
		<li><a href="bootstrap3-plugin-popover.html">弹出框（Popover）插件根据需求生成内容和标记，默认情况下是把弹出框（popover）放在它们的触发元素后面。您可以有以下两种方式添加弹出框（popover）：
				通过 data 属性：如需添加一个弹出框（popover），只需向一个锚/按钮标签添加 data-toggle="popover"
				即可。锚的 title 即为弹出框（popover）的文本。默认情况下，插件把弹出框（popover）设置在顶部。</a></li>
		<li><a href="bootstrap3-plugin-popover-method.html">实例
				下面的实例演示了弹出框（Popover）插件的方法：</a></li>
		<li><a href="bootstrap3-plugin-popover-event.html">实例
				下面的实例演示了弹出框（Popover）插件的事件：</a></li>
		<li><a href="bootstrap3-plugin-alert.html">下面的实例演示了通过 data
				属性使用警告框（Alert）插件的用法。</a></li>
		<li><a href="bootstrap3-plugin-alert-method1.html">下面的实例演示了
				.alert() 方法的用法：</a></li>
		<li><a href="bootstrap3-plugin-alert-method2.html">下面的实例演示了
				.alert('close') 方法的用法：</a></li>
		<li><a href="bootstrap3-plugin-alert-event.html">下面的实例演示了警告框（Alert）插件的事件</a></li>
		<li><a href="bootstrap3-plugin-button-loadingstate.html">加载状态
				如需向按钮添加加载状态，只需要简单地向 button 元素添加 data-loading-text="Loading..."
				作为其属性即可，如下面实例所示：</a></li>
		<li><a href="bootstrap3-plugin-button-sinlgetoggle.html">单个切换
				如需激活单个按钮的切换（即改变按钮的正常状态为按压状态，反之亦然），只需向 button 元素添加
				data-toggle="button" 作为其属性即可，如下面实例所示：</a></li>
		<li><a href="bootstrap3-plugin-button-checkbox.html">复选框（Checkbox）
				您可以创建复选框组，并通过向 btn-group 添加 data 属性 data-toggle="buttons" 来添加复选框组的切换</a></li>
		<li><a href="bootstrap3-plugin-button-radio.html">单选按钮（Radio）
				类似地，您可以创建单选按钮组，并通过向 btn-group 添加 data 属性 data-toggle="buttons"
				来添加单选按钮组的切换。</a></li>
		<li><a href="bootstrap3-plugin-button-method.html">下面的实例演示了上面方法的用法：</a></li>
		<li><a href="bootstrap3-plugin-collapse-accordion.html">折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板，它都允许很多内容选项。
				如果您想要单独引用该插件的功能，那么您需要引用 collapse.js。同时，也需要在您的 Bootstrap 版本中引用
				Transition（过渡）插件。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js
				或压缩版的 bootstrap.min.js。 您可以使用折叠（Collapse）插件：
				创建可折叠的分组或折叠面板（accordion），如下所示：</a></li>
		<li><a href="bootstrap3-plugin-collapse-simple.html">data-toggle="collapse"
				添加到您想要展开或折叠的组件的链接上。 href 或 data-target 属性添加到父组件，它的值是子组件的 id。
				data-parent 属性把折叠面板（accordion）的 id 添加到要展开或折叠的组件的链接上。 创建不带 accordion
				标记的简单的可折叠组件（collapsible），如下所示</a></li>
		<li><a href="bootstrap3-plugin-collapse-method.html">下面的实例演示了方法的用法</a></li>
		<li><a href="bootstrap3-plugin-collapse-event.html">下面的实例演示了事件的用法</a></li>
		<li><a href="bootstrap3-plugin-carousal-simple.html">Bootstrap
				轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。
				如果您想要单独引用该插件的功能，那么您需要引用 carousel.js。或者，正如 Bootstrap 插件概览
				一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。 实例 下面是一个简单的幻灯片，使用
				Bootstrap
				轮播（Carousel）插件显示了一个循环播放元素的通用组件。为了实现轮播，您只需要添加带有该标记的代码即可。不需要使用 data
				属性，只需要简单的基于 class 的开发即可。</a></li>
		<li><a href="bootstrap3-plugin-carousal-caption.html">可选的标题
				您可以通过 .item 内的 .carousel-caption 元素向幻灯片添加标题。只需要在该处放置任何可选的 HTML
				即可，它会自动对齐并格式化。下面的实例演示了这点：</a></li>
		<li><a href="bootstrap3-plugin-carousal-method.html">下面的实例演示了方法的用法：</a></li>
		<li><a href="bootstrap3-plugin-carousal-event.html">下面的实例演示了事件的用法：</a></li>
		<li><a href="bootstrap3-plugin-affix1.htm">附加导航（Affix）插件允许某个
				div
				固定在页面的某个位置。您也可以在打开或关闭使用该插件之间进行切换。一个常见的例子是社交图标。它们将在某个位置开始，但当页面点击某个标记，该
				div会锁定在某个位置，不会随着页面其他部分一起滚动。 如果您想要单独引用该插件的功能，那么您需要引用 affix.js。或者，正如
				Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。 用法
				您可以通过 data 属性或者通过 JavaScript 来使用附加导航（Affix）插件。 通过 data
				属性：如需向元素添加附加导航（Affix）行为，只需要向需要监听的元素添加 data-spy="affix"
				即可。请使用偏移来定义何时切换元素的锁定和移动。 实例 下面的实例演示了通过 data 属性使用附加导航（Affix）插件的用法： </a></li>
		<li><a href="bootstrap3-plugin-affix2.htm">下面的实例演示了通过
				JavaScript 使用附加导航（Affix）插件的用法：</a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>

	</ol>
</body>
</html>